<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://lib.baomitu.com/echarts/5.4.2/echarts.js"></script>
    <style>
        .box {
            width: 100vw;
            overflow: auto;
            background-color: #5d87bb;
        }
        .chart{
            width: 1200px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="chart"></div>
    </div>
</body>
<script>
    const initChart = () => {
        let mapDom = document.querySelector('.chart');
        let myChart = echarts.init(mapDom);
        myChart.clear();
        let icon_Map = {
            "大雪": '',
            "大雨": '',
            "多云": '',
            "雨加雪": ''
        }
        let zh_en = {
            "大雪": 'MajorSnow',
            "大雨": "heavyRain",
            "多云": "cloudy",
            "雨加雪": "sleet"
        }
        let data = [
            {
                time: '09:00',
                quality: '优',
                grade: '1级',
                weather: '大雪',
                value: 8
            },
            {
                time: '10:00',
                quality: '优',
                grade: '1级',
                weather: '大雨',
                value: 7
            },
            {
                time: '11:00',
                quality: '优',
                grade: '1级',
                weather: '多云',
                value: 8
            },
            {
                time: '12:00',
                quality: '优',
                grade: '1级',
                weather: '大雪',
                value: 8
            },
            {
                time: '13:00',
                quality: '优',
                grade: '1级',
                weather: '雨加雪',
                value: 5
            },
            {
                time: '14:00',
                quality: '优',
                grade: '1级',
                weather: '大雪',
                value: 5
            },
            {
                time: '15:00',
                quality: '优',
                grade: '1级',
                weather: '大雪',
                value: 5
            },
            {
                time: '16:00',
                quality: '优',
                grade: '1级',
                weather: '大雪',
                value: 8
            },
            {
                time: '17:00',
                quality: '优',
                grade: '1级',
                weather: '多云',
                value: 12
            },
            {
                time: '18:00',
                quality: '优',
                grade: '1级',
                weather: '多云',
                value: 15
            },
            {
                time: '19:00',
                quality: '优',
                grade: '1级',
                weather: '多云',
                value: 5
            }
        ]
        let maxArr = [];
        maxArr.length = data.length;
        maxArr.fill(1);
        console.log(maxArr)
        let rich_weathers = {};
        let rich_img_w = 39;
        for (let k in icon_Map) {
            let rich_key = zh_en[k]
            rich_weathers[rich_key] = {
                width: rich_img_w,
                height: 32,
                backgroundColor: {
                    image: icon_Map[k],
                },
            }
        }

        let lineSymbol = ``;
        let xdata = [1, 2, 3]
        option = {
            grid: [
                {
                    containLabel: true,
                    left: '0%',
                    right: '0%',
                    top: 40,
                    bottom: 10,
                    backgroundColor: '#5d87bb',
                },
                {
                    containLabel: true,
                    left: '3%',
                    top: '10%',
                    right: '3%',
                    backgroundColor: '#5d87bb',
                }
            ],
            // dataZoom: [
            //     {
            //         show: false, // 为true 滚动条出现
            //         realtime: true,
            //         type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
            //         startValue: 0, // 表示默认展示20%～80%这一段。
            //         endValue: 5,
            //         right: "3%",
            //         left: "3%",
            //         height: '10',
            //         xAxisIndex: [0, 1],     //关联多个y轴
            //         moveHandleStyle: {
            //             color: "rgba(89, 202, 241,.5)",
            //         },
            //         moveHandleSize: "6",
            //         emphasis: {
            //             moveHandleStyle: {
            //                 color: "rgba(89, 202, 241,.5)",
            //             }
            //         },
            //         textStyle: {
            //             color: "rgba(255,255,255,0)",
            //         },
            //         backgroundColor: 'rgba(255,255,255,.1)',
            //         borderColor: "rgba(255,255,255,0)",
            //         fillerColor: "rgba(0,0,0,0)",
            //         handleSize: "6",
            //         handleStyle: {
            //             color: "rgba(255,255,255,0)"
            //         },
            //         brushStyle: {
            //             color: "rgba(129, 243, 253)"
            //         }
            //     },
            //     {
            //         type: 'inside',
            //         xAxisIndex: [0, 1],     //关联多个y轴
            //         zoomOnMouseWheel: false,  //滚轮是否触发缩放
            //         moveOnMouseMove: true
            //     }
            // ],
            xAxis: [
                {
                    type: 'category',
                    data: data.map(v => {
                        return v.time
                    }),
                    triggerEvent: true,
                    axisLabel: {
                        margin: 14,
                        show: true,
                        formatter: (v) => {
                            let filter_ = data.filter((o) => o.time == v)[0];
                            let rich_key = zh_en[filter_.weather];

                            let grade = filter_.grade;
                            let quality = filter_.quality;
                            let timeH = filter_.time
                            let currentHours = new Date().getHours();
                            let xHours = timeH.split(':')[0];
                            if (xHours == currentHours) {
                                return `{${rich_key}| }\n{grade|${grade}}\n{quality|${quality}}\n{timeHA|当前}`
                            }
                            return `{${rich_key}| }\n{grade|${grade}}\n{quality|${quality}}\n{timeH|${timeH}}`
                        },
                        rich: {
                            ...rich_weathers,
                            grade: {
                                color: "#ffffff9a",
                                height: 30,
                                lineHeight: 30,
                                fontSize: 14,
                                align: 'center',
                                padding: [1, 3, 0, 0],
                                width: rich_img_w
                            },
                            quality: {
                                color: "#ffffff9a",
                                height: 20,
                                fontSize: 12,
                                align: 'center',
                                width: rich_img_w,
                                borderRadius: 4,
                                padding: [1.5, 3, 0, 0],
                                backgroundColor: '#ffffff1a'
                            },
                            timeH: {
                                color: "#ffffff9a",
                                height: 26,
                                fontSize: 12,
                                align: 'center',
                                width: rich_img_w,
                                borderRadius: 4,
                                padding: [1, 3, 0, 0],
                            },
                            timeHA: {
                                color: "#ffffff",
                                height: 26,
                                fontSize: 12,
                                align: 'center',
                                width: rich_img_w,
                                borderRadius: 4,
                                padding: [1, 3, 0, 0],
                            }
                        }
                    },
                    gridIndex: 0,
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                },

                // 注意gridIndex的值
                // 用于滚动的无意义的，由于刻度鼠标拖拽无法响应，dataZoom的事件。这里加一个无意义的xaxis用于铺满全屏的grid
                // 使用series的拖拽达到效果
                {
                    type: 'category',
                    position: 'bottom',
                    triggerEvent: true,
                    data: [],
                    gridIndex: 1,
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    gridIndex: 0,
                    axisLabel: {
                        show: false
                    },
                    min: data.map((v) => v.value).sort((a, b) => a - b)[0],
                    max: data.map((v) => v.value).sort((a, b) => b - a)[0],
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                },


                // 由于 axios轴 鼠标拖拽无法滚动，加一个铺满全容器的 grid 覆盖 进而可以拖拽滚动
                // 注意gridIndex的值
                {
                    type: 'value',
                    max: 1,
                    min: 0,
                    gridIndex: 1,
                    axisLabel: {
                        show: false
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                }
            ],
            color: ['#00e529'],
            series: [
                {
                    type: 'line',
                    symbolSize: 10,
                    symbol: 'image://' + lineSymbol,
                    data: data,
                    yAxisIndex: 0,
                    xAxisIndex: 0,
                    smooth: true,
                    label: {
                        show: true,
                        position: 'top',
                        distance: 5,
                        formatter: (v) => {
                            return v.value + '°'
                        },
                        color: "#fff",
                        fontSize: 18,
                        fontWeight: 600
                    },
                },

                // 由于 axios轴 鼠标拖拽无法滚动，加一个铺满全容器的 grid 覆盖 进而可以拖拽滚动
                // {
                //     data: maxArr,
                //     type: 'line',
                //     yAxisIndex: 1,
                //     xAxisIndex: 1,
                //     itemStyle: {
                //         opacity: 0
                //     },
                //     tooltip: {
                //         show: false
                //     }
                // }
            ]
        };
        myChart.setOption(option)
    }
    initChart()
</script>

</html>